<template>
  <div class="list">
    <Menus title="经典案例" :home="true" />
    <div class="case_list">
      <ul>
        <li v-for="(item,index) in list" :key="'key-list-'+index">
          <router-link :to="'/caselibrary/'+item.id">{{item.case_title}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import api from '../datas/api'
// import axios from 'axios'

export default {
  data() {
    return {
      list: []
    }
  },
  methods: {},
  async mounted() {
    const res = await this.$get(api.caselibrary, this)
    this.list = res.result.data
    console.log(this.list)
  },
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.list {
  padding: 1.6rem 0 2rem;
  background: #ddd;
  min-height: 100vh;
  .case_list {
    width: 12rem;
    margin: 0.55rem auto 0;
    background-color: #fff;
    border-radius: 0.1rem;

    ul {
      list-style: none;
      padding: 0;
      li {
        height: 0.9rem;
        font-size: 0.28rem;
        line-height: 0.9rem;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a {
          color: #333;
          display: block;
          padding: 0 0.45rem;
          height: 0.9rem;
          &:active {
            background-color: #eee;
          }
        }
      }
    }
  }
}
@media screen and (orientation: portrait) {
  .list .case_list {
    width: 90%;
    margin: 0.55rem auto;
    box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.05);
  }
}
@media screen and (orientation: landscape) {
}
</style>
